<template>
    <div class="scan">
        <div class="checkbox-wrap">
            <span class="tick box" :class="{'on': selected}"></span>
            <span class="color box" :style="'background-color:'+color" :class="{'border': color == '#ffffff'}"></span>
        </div>
        {{title}}
    </div>
</template>

<script lang="ts">
import Component from 'vue-class-component'
    import {
        Prop,
        Vue
    } from 'vue-property-decorator';

    @Component({
        props: {
            title: {
                type: String,
                default: ''
            },
            color: {
                type: String,
                default: '#000'
            },
            selected: {
                type: Boolean,
                default: false
            }
        }
    })

    export default class Checkbox extends Vue {
        data () {
            return {
                
            }
        }

        mounted() {
            // console.log(this.title)
        }

        closeModal () {
            console.log("点击");
        }
    }
</script>

<style lang="scss" scoped>
    .scan{
        font-size: 20px;
        .checkbox-wrap{
            display: inline-block;
            vertical-align: middle;
            .box{
                display: inline-block;
                width: 20px;
                height: 20px;
                box-sizing: border-box;
            }
            .tick,.border{
                border: 1px solid #dcdcdc;
            }
            .tick.on{
                background: url(../../assets/img/icon/tick.png) center no-repeat;
            }
        }
    }
</style>